<template>
    <article class="EstateDetails-RightList-box">
        <div class="inside">
            <h4><span>购房意向</span></h4>
            <!--客户立即报名——留言类型，type：1.购房意向、2.移民、3.留学、4.保险、5.1秒变身海外业主-->
            <clientMessage :messageType="1"></clientMessage>

            <h4><span>同价位房源</span></h4>
            <ul class="same-price-house-list" v-show="!samePriceHouse_isNoDataShow">
                <li v-for="(item, index) in samePriceHouseItem" :key="index">
                    <a-card :title="null" hoverable :loading="samePriceHouseCardLoading" :bordered="false">
                        <router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">
                            <img v-lazy="item.photo" :title="item.title" :alt="item.title" />
                            <p class="webkit-text-overflow-1lines">{{ isNull0(item.title) }}</p>
                        </router-link>
                        <div class="bottom transition">
                            <p class="webkit-text-overflow-1lines">
                                <span>{{ isNull0(item.cityName) }}</span>
                                <span>${{ isNull0(item.price, '万') }}</span> |
                                <span>{{ isNull0(item.projectType) }}</span> |
                                <span>{{ isNull0(item.investmentType) }}</span>
                            </p>
                        </div>
                    </a-card>
                </li>
            </ul>
            <h5 v-show="samePriceHouse_isNoDataShow">暂未查询到数据！</h5>

            <h4><span>热门房源</span></h4>
            <ul class="recommend-house-list">
                <li v-for="(item, index) in recommendHouseItem" :key="index">
                    <a-card :title="null" hoverable :loading="recommendHouseCardLoading" :bordered="false">
                        <router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">
                            <img v-lazy="item.photo" :title="item.title" :alt="item.title" />
                            <p class="webkit-text-overflow-1lines">{{isNull0(item.title)}}</p>
                        </router-link>
                        <div class="bottom transition">
                            <p class="webkit-text-overflow-1lines">
                                <span>{{ isNull0(item.cityName) }}</span>
                                <span>${{ isNull0(item.price) }}万</span> |
                                <span>{{ isNull0(item.projectType) }}</span> |
                                <span>{{ isNull0(item.investmentType) }}</span>
                            </p>
                        </div>
                    </a-card>
                </li>
            </ul>
        </div>

        <p v-show="false">{{getPriceSectionId}}</p>
    </article>
</template>

<script>
    import clientMessage from '../../../../components/clientMessage.vue';//公共组件——留学意向

    export default {
        data() {
            return {
                PriceSectionId: '',//同价位房源列表id

                samePriceHouseItem: [],  //同价位房源
                samePriceHouseCardLoading: true,  //同价位房源——卡片加载完成前会有文本块样式
                samePriceHouse_isNoDataShow: false, //同价位房源——判断是否有无数据

                recommendHouseItem: [],  //热门房源
                recommendHouseCardLoading: true,  //热门房源——卡片加载完成前会有文本块样式
                recommendHouse_isNoDataShow: false, //热门房源——判断是否有无数据

            }
        },
        computed: {
            //从state获取同价位房源列表id
            getPriceSectionId() {
                if (this.$store.getters.get_PriceSectionId) {
                    this.PriceSectionId = this.$store.getters.get_PriceSectionId;
                    // 获取同价位房源列表数据
                    this.getSamePriceHouseList();
                }
                return this.$store.getters.get_PriceSectionId
            },
        },
        created() {
        },
        mounted() {
            //获取热门房源列表数据
            this.getRecommendHouseList();

        },
        methods: {
            //获取同价位房源列表数据
            getSamePriceHouseList() {
                this.$get('/house/search/1/4?field=sort&direction=asc&isRecommend=true&pid=' + this.PriceSectionId).then(res => {
                    this.samePriceHouseCardLoading = false;
                    if (res.status == 0) {
                        this.samePriceHouseItem = res.list;
                        this.samePriceHouse_isNoDataShow = false;
                    } else {
                        this.samePriceHouse_isNoDataShow = true;
                    }
                })
            },
            //获取热门房源列表数据
            getRecommendHouseList() {
                this.$get('/house/search/1/4?field=sort&direction=asc&isRecommend=true').then(res => {
                    this.recommendHouseCardLoading = false;
                    if (res.status == 0) {
                        this.recommendHouseItem = res.list;
                        this.recommendHouse_isNoDataShow = false;
                    } else {
                        this.recommendHouse_isNoDataShow = true;
                    }
                })
            },

        },
        components: {
            clientMessage
        }
    }
</script>
<style lang="less" type="text/less">
    body {
        /* 右侧同价位房源和推荐热门房源 */
        .EstateDetails-RightList-box {
            > .inside {
                padding: 15px;
                background: #fff;

                > h4 {
                    margin: 20px 0;
                    font-size: 18px;
                    font-weight: bold;
                    padding: 0 0 10px 0;
                    border-bottom: 1px solid #E5E5E5;

                    > span {
                        padding: 0 0 0 10px;
                        border-left: 4px solid #00A4A0;
                    }
                }

                > h4:first-of-type {
                    margin: 0 0 20px 0;
                }

                > ul {
                    margin: 10px 0 0 0;

                    > li {
                        padding: 10px 0;

                        .ant-card {
                            > .ant-card-body {
                                padding: 0;
                                -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);

                                > a {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                    position: relative;
                                    overflow: hidden;

                                    > img {
                                        width: 100%;
                                        max-height: 180px;
                                        -webkit-transition: all linear 1s;
                                        -moz-transition: all linear 1s;
                                        transition: all linear 1s;
                                    }

                                    > p {
                                        width: 100%;
                                        position: absolute;
                                        bottom: 0;
                                        background: rgba(0, 0, 0, .4);
                                        color: #fff;
                                        padding: 0 0 0 12px;
                                    }
                                }

                                > a:hover {
                                    > img {
                                        -webkit-transform: scale(1.1, 1.1);
                                        -moz-transform: scale(1.1, 1.1);
                                        transform: scale(1.1, 1.1);
                                        filter: alpha(opacity=50);
                                    }
                                }

                                > .bottom {
                                    padding: 8px;
                                    border: 1px solid #eaebea;
                                    background: #fff;

                                    > p {
                                        font-size: 14px;

                                        > span {
                                            /*margin: 0 8px;*/
                                        }

                                        > span:first-of-type {
                                            margin: 0 8px 0 0;
                                            font-size: 16px;
                                            color: #f65248;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                > h5 {
                    font-size: 16px;
                    color: #000;
                    text-align: center;
                }
            }
        }
    }
</style>